<template>
  <!--头部信息-->
  <div class="HeaderView">
    <div
        style="height: 60px; background-color: #fff; display: flex; align-items: center; border-bottom: 1px solid #ddd">
      <div style="flex: 1">
        <div style="padding-left: 20px; display: flex; align-items: center">
          <img src="@/assets/imgs/logo.png" alt="" style="width: 40px">
          <a href="https://gitee.com/cencat1/MyStudent.git" target="_blank" style="display: flex">
            <div class="loader" style="padding-top: 23px;font-weight: bold; font-size: 24px; margin-left: 5px;color:#171616"></div>
            <img style="width: 80px;height: 80px" src="https://gitee.com/static/images/logo-black.svg" alt="">

          </a>

        </div>
      </div>
      <div style="width: fit-content; padding-right: 30px; margin: 10px; display: flex; align-items: center;">
        <img src="https://sky-out-cxg.oss-cn-beijing.aliyuncs.com/head.png" alt="" style="width: 35px; height: 35px">
        <el-dropdown>
       <span class="el-dropdown-link">
         <span style="margin-left: 5px;color: #171616;font-weight: bold">{{ email }}</span>
         <i class="el-icon-arrow-down el-icon--right"></i>
       </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout">
              <span style="display:block;">退出</span>
            </el-dropdown-item>
            <el-dropdown-item @click.native="onchange">
              <span style="display:block;">切换用户</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import {getToken} from "@/utils/setToken";

export default {
  data() {
    return {
      name: 'HeaderView',
      email: ""

    }
  },
  methods: {
    /*退出系统*/
    logout() {
      this.$confirm('是否退出系统?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push('/login')
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => { // 取消登录
            this.$message({
              type: 'info',
              message: '已取消退出'
            });
          }
      )


    },
    /*切换用户*/
    onchange() {
      this.$confirm('是否切换用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push('/login')
        this.$message({
          type: 'success',
          message: '切换成功!'
        })
      }).catch(() => {// 取消
            this.$message({
              type: 'info',
              message: '已取消切换'
            });
          }
      )
    }
  },
  created() {
    this.email = getToken("email");
  }
}
</script>

<style lang="scss">
.HeaderView {
  .el-header {
    color: aliceblue;
    display: flex;
    justify-content: space-between;
    border-radius: 4px 4px 10px 10px;

    .title {
      font-size: 30px;
      width: 200px;
      margin-top: 5px;
      color: black;
      font-weight: bold;
    }

    .email {
      margin-top: 10px;
      font-size: 25px;
      color: black;
    }

  }

}



/* HTML: <div class="loader"></div> */
.loader {
  --w:12ch;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  letter-spacing: calc(10*var(--w));
  width: var(--w);
  overflow: hidden;
  white-space: nowrap;
  color: #0000;
  animation: l18 3s infinite;
}
.loader:before {
  content:"学生管理系统";
}

@keyframes l18 {
  0% {text-shadow:
      calc(  9*var(--w)) 0 #000,calc( -1*var(--w)) 0 #000,calc(-11*var(--w)) 0 #000,calc(-21*var(--w)) 0 #000,calc(-31*var(--w)) 0 #000,
      calc(-41*var(--w)) 0 #000,calc(-51*var(--w)) 0 #000,calc(-61*var(--w)) 0 #000,calc(-71*var(--w)) 0 #000,calc(-81*var(--w)) 0 #000}
  4% {text-shadow:
      calc(  0*var(--w)) 0 #000,calc( -1*var(--w)) 0 #000,calc(-11*var(--w)) 0 #000,calc(-21*var(--w)) 0 #000,calc(-31*var(--w)) 0 #000,
      calc(-41*var(--w)) 0 #000,calc(-51*var(--w)) 0 #000,calc(-61*var(--w)) 0 #000,calc(-71*var(--w)) 0 #000,calc(-81*var(--w)) 0 #000}
  8% {text-shadow:
      calc(  0*var(--w)) 0 #000,calc(-10*var(--w)) 0 #000,calc(-11*var(--w)) 0 #000,calc(-21*var(--w)) 0 #000,calc(-31*var(--w)) 0 #000,
      calc(-41*var(--w)) 0 #000,calc(-51*var(--w)) 0 #000,calc(-61*var(--w)) 0 #000,calc(-71*var(--w)) 0 #000,calc(-81*var(--w)) 0 #000}
  12% {text-shadow:
      calc(  0*var(--w)) 0 #000,calc(-10*var(--w)) 0 #000,calc(-20*var(--w)) 0 #000,calc(-21*var(--w)) 0 #000,calc(-31*var(--w)) 0 #000,
      calc(-41*var(--w)) 0 #000,calc(-51*var(--w)) 0 #000,calc(-61*var(--w)) 0 #000,calc(-71*var(--w)) 0 #000,calc(-81*var(--w)) 0 #000}
  16% {text-shadow:
      calc(  0*var(--w)) 0 #000,calc(-10*var(--w)) 0 #000,calc(-20*var(--w)) 0 #000,calc(-30*var(--w)) 0 #000,calc(-31*var(--w)) 0 #000,
      calc(-41*var(--w)) 0 #000,calc(-51*var(--w)) 0 #000,calc(-61*var(--w)) 0 #000,calc(-71*var(--w)) 0 #000,calc(-81*var(--w)) 0 #000}
  20% {text-shadow:
      calc(  0*var(--w)) 0 #000,calc(-10*var(--w)) 0 #000,calc(-20*var(--w)) 0 #000,calc(-30*var(--w)) 0 #000,calc(-40*var(--w)) 0 #000,
      calc(-41*var(--w)) 0 #000,calc(-51*var(--w)) 0 #000,calc(-61*var(--w)) 0 #000,calc(-71*var(--w)) 0 #000,calc(-81*var(--w)) 0 #000}
  24% {text-shadow:
      calc(  0*var(--w)) 0 #000,calc(-10*var(--w)) 0 #000,calc(-20*var(--w)) 0 #000,calc(-30*var(--w)) 0 #000,calc(-40*var(--w)) 0 #000,
      calc(-50*var(--w)) 0 #000,calc(-51*var(--w)) 0 #000,calc(-61*var(--w)) 0 #000,calc(-71*var(--w)) 0 #000,calc(-81*var(--w)) 0 #000}
  28% {text-shadow:
      calc(  0*var(--w)) 0 #000,calc(-10*var(--w)) 0 #000,calc(-20*var(--w)) 0 #000,calc(-30*var(--w)) 0 #000,calc(-40*var(--w)) 0 #000,
      calc(-50*var(--w)) 0 #000,calc(-60*var(--w)) 0 #000,calc(-61*var(--w)) 0 #000,calc(-71*var(--w)) 0 #000,calc(-81*var(--w)) 0 #000}
  32% {text-shadow:
      calc(  0*var(--w)) 0 #000,calc(-10*var(--w)) 0 #000,calc(-20*var(--w)) 0 #000,calc(-30*var(--w)) 0 #000,calc(-40*var(--w)) 0 #000,
      calc(-50*var(--w)) 0 #000,calc(-60*var(--w)) 0 #000,calc(-70*var(--w)) 0 #000,calc(-71*var(--w)) 0 #000,calc(-81*var(--w)) 0 #000}
  36% {text-shadow:
      calc(  0*var(--w)) 0 #000,calc(-10*var(--w)) 0 #000,calc(-20*var(--w)) 0 #000,calc(-30*var(--w)) 0 #000,calc(-40*var(--w)) 0 #000,
      calc(-50*var(--w)) 0 #000,calc(-60*var(--w)) 0 #000,calc(-70*var(--w)) 0 #000,calc(-80*var(--w)) 0 #000,calc(-81*var(--w)) 0 #000}
  40%,
  60% {text-shadow:
      calc(  0*var(--w)) 0 #000,calc(-10*var(--w)) 0 #000,calc(-20*var(--w)) 0 #000,calc(-30*var(--w)) 0 #000,calc(-40*var(--w)) 0 #000,
      calc(-50*var(--w)) 0 #000,calc(-60*var(--w)) 0 #000,calc(-70*var(--w)) 0 #000,calc(-80*var(--w)) 0 #000,calc(-90*var(--w)) 0 #000}
  64% {text-shadow:
      calc(-9*var(--w)) 0 #000,calc(-10*var(--w)) 0 #000,calc(-20*var(--w)) 0 #000,calc(-30*var(--w)) 0 #000,calc(-40*var(--w)) 0 #000,
      calc(-50*var(--w)) 0 #000,calc(-60*var(--w)) 0 #000,calc(-70*var(--w)) 0 #000,calc(-80*var(--w)) 0 #000,calc(-90*var(--w)) 0 #000}
  68% {text-shadow:
      calc(-9*var(--w)) 0 #000,calc(-19*var(--w)) 0 #000,calc(-20*var(--w)) 0 #000,calc(-30*var(--w)) 0 #000,calc(-40*var(--w)) 0 #000,
      calc(-50*var(--w)) 0 #000,calc(-60*var(--w)) 0 #000,calc(-70*var(--w)) 0 #000,calc(-80*var(--w)) 0 #000,calc(-90*var(--w)) 0 #000}
  72% {text-shadow:
      calc(-9*var(--w)) 0 #000,calc(-19*var(--w)) 0 #000,calc(-29*var(--w)) 0 #000,calc(-30*var(--w)) 0 #000,calc(-40*var(--w)) 0 #000,
      calc(-50*var(--w)) 0 #000,calc(-60*var(--w)) 0 #000,calc(-70*var(--w)) 0 #000,calc(-80*var(--w)) 0 #000,calc(-90*var(--w)) 0 #000}
  76% {text-shadow:
      calc(-9*var(--w)) 0 #000,calc(-19*var(--w)) 0 #000,calc(-29*var(--w)) 0 #000,calc(-39*var(--w)) 0 #000,calc(-40*var(--w)) 0 #000,
      calc(-50*var(--w)) 0 #000,calc(-60*var(--w)) 0 #000,calc(-70*var(--w)) 0 #000,calc(-80*var(--w)) 0 #000,calc(-90*var(--w)) 0 #000}
  80% {text-shadow:
      calc(-9*var(--w)) 0 #000,calc(-19*var(--w)) 0 #000,calc(-29*var(--w)) 0 #000,calc(-39*var(--w)) 0 #000,calc(-49*var(--w)) 0 #000,
      calc(-50*var(--w)) 0 #000,calc(-60*var(--w)) 0 #000,calc(-70*var(--w)) 0 #000,calc(-80*var(--w)) 0 #000,calc(-90*var(--w)) 0 #000}
  84% {text-shadow:
      calc(-9*var(--w)) 0 #000,calc(-19*var(--w)) 0 #000,calc(-29*var(--w)) 0 #000,calc(-39*var(--w)) 0 #000,calc(-49*var(--w)) 0 #000,
      calc(-59*var(--w)) 0 #000,calc(-60*var(--w)) 0 #000,calc(-70*var(--w)) 0 #000,calc(-80*var(--w)) 0 #000,calc(-90*var(--w)) 0 #000}
  88% {text-shadow:
      calc(-9*var(--w)) 0 #000,calc(-19*var(--w)) 0 #000,calc(-29*var(--w)) 0 #000,calc(-39*var(--w)) 0 #000,calc(-49*var(--w)) 0 #000,
      calc(-59*var(--w)) 0 #000,calc(-69*var(--w)) 0 #000,calc(-70*var(--w)) 0 #000,calc(-80*var(--w)) 0 #000,calc(-90*var(--w)) 0 #000}
  92% {text-shadow:
      calc(-9*var(--w)) 0 #000,calc(-19*var(--w)) 0 #000,calc(-29*var(--w)) 0 #000,calc(-39*var(--w)) 0 #000,calc(-49*var(--w)) 0 #000,
      calc(-59*var(--w)) 0 #000,calc(-69*var(--w)) 0 #000,calc(-79*var(--w)) 0 #000,calc(-80*var(--w)) 0 #000,calc(-90*var(--w)) 0 #000}
  96% {text-shadow:
      calc(-9*var(--w)) 0 #000,calc(-19*var(--w)) 0 #000,calc(-29*var(--w)) 0 #000,calc(-39*var(--w)) 0 #000,calc(-49*var(--w)) 0 #000,
      calc(-59*var(--w)) 0 #000,calc(-69*var(--w)) 0 #000,calc(-79*var(--w)) 0 #000,calc(-89*var(--w)) 0 #000,calc(-90*var(--w)) 0 #000}
  100% {text-shadow:
      calc(-9*var(--w)) 0 #000,calc(-19*var(--w)) 0 #000,calc(-29*var(--w)) 0 #000,calc(-39*var(--w)) 0 #000,calc(-49*var(--w)) 0 #000,
      calc(-59*var(--w)) 0 #000,calc(-69*var(--w)) 0 #000,calc(-79*var(--w)) 0 #000,calc(-89*var(--w)) 0 #000,calc(-99*var(--w)) 0 #000}
}

</style>
